import './style.css'
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

// 解构子标签
const { SubMenu } = Menu;

const MenuList = () => {
    const handleClick = () => {

    }

    return <div className="menu-box">
        <Menu
            onClick={() => handleClick}
            style={{ width: "100%" }}
            defaultSelectedKeys={['29']} // 默认选中 Menu.Item  key
            defaultOpenKeys={['2']} // 默认打开 SubMenu   key
            mode="inline"
        >
            <SubMenu key="0" icon={<SettingOutlined />} title="试题管理">
                <Menu.Item key="19">Option 9</Menu.Item>
                <Menu.Item key="120">Option 10</Menu.Item>
                <Menu.Item key="131">Option 11</Menu.Item>
                <Menu.Item key="142">Option 12</Menu.Item>
            </SubMenu>
            <SubMenu key="1" icon={<MailOutlined />} title="用户管理">
                <Menu.Item key="9">Option 9</Menu.Item>
                <Menu.Item key="10">Option 10</Menu.Item>
                <Menu.Item key="11">Option 11</Menu.Item>
                <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
            <SubMenu key="2" icon={<AppstoreOutlined />} title="考试管理">
                <Menu.Item key="29">
                    <NavLink to="/layout/home"> 添加考试</NavLink>
                </Menu.Item>
                <Menu.Item key="150">
                    <NavLink to="/layout/list"> 考试列表</NavLink>
                </Menu.Item>
            </SubMenu>
        </Menu>
    </div>
}

export default MenuList
